<template>
  <div class="setting-wrap">
    <div class="setting-box">
      <van-cell title="头像" is-link url="#/setAvatar">
        <!-- is-link url="#/me/setAvatar" -->
        <template #value>

          <div class="avatar" :style="'background-image:url(' + user_info.headImages + ')'"></div>
        </template>
      </van-cell>
    </div>
    <div class="setting-box">
      <van-cell title="昵称" is-link @click="showPopup">
        <template #value>
          <span class="custom-title">{{ user_info.nickName }}</span>
        </template>
      </van-cell>
    </div>
    <div class="setting-box">
      <van-cell title="手机号">
        <template #value>
          <span class="custom-title">{{ formatPhoneNumber(user_info.mobile) }}</span>
        </template>
      </van-cell>
    </div>
    <div class="setting-box">
      <van-cell title="实名认证" :is-link="!user_info.idCard" :url="user_info.idCard ? '' : '#/realName'">
        <template #value>
          <span class="custom-title idCard" :class="{ 'verified': user_info.idCard }" url="#/null">
            {{ user_info.idCard ? '已认证' : '未认证' }}
          </span>
        </template>
      </van-cell>
    </div>
    <div class="setting-box">
      <van-cell title="交易密码" is-link url="#/editPwd">
        <template #value>
          <span class="custom-title">{{ user_info.payPassword ? "去修改" : "未设置" }}</span>
        </template>
      </van-cell>
    </div>
    <div class="setting-box">
      <van-cell title="登录密码" is-link url="#/editLogin">
        <template #value>
          <span class="custom-title">{{ user_info.password ? "去修改" : "未设置" }}</span>
        </template>
      </van-cell>
    </div>
    <div class="setting-box">
      <van-cell title="收货地址" is-link url="#/editAddress">
      </van-cell>
    </div>
    <van-button plain class="block_gradual" type="primary" @click="resetToken">退出登录</van-button>

    <van-dialog v-model:show="shownik" title="修改昵称" show-cancel-button style="background: #222424 !important;"
      @confirm="confirms()">
      <div class="set-warp">
        <h2>原昵称：{{ user_info.nickName }}</h2>
        <van-cell-group inset>
          <van-field v-model="formData.nickName" placeholder="请输入1-8个字/2-16位字符" maxlength="16" />
        </van-cell-group>
      </div>
    </van-dialog>
  </div>

</template> 
<script>
import { computed, ref, reactive, onMounted } from 'vue'
import { useStore } from "vuex";
import { cancellation, editNickName } from "@/api/user";
import { Dialog, Toast } from "vant";
import { useRouter } from 'vue-router'
import { stringNum, formatPhoneNumber } from "@/utils/phone";

export default {
  setup() {
    const store = useStore();
    const router = useRouter()
    const user_info = computed(() => {
      return store.getters.user_info
    })
    const shownik = ref(false);
    const showPopup = () => {
      shownik.value = true;
    }
    const formData = reactive({
      show: false,
      nickName: ''
    })
    const confirms = () => {
      const data = { nickName: formData.nickName }
      let num = stringNum(formData.nickName)
      console.log(num)
      if (num < 3) {
        shownik.value = true
        return Toast('仅支持1-8个字/2-16位字符')
      } else if (num >= 17) {
        return Toast('仅支持1-8个字/2-16位字符')
      }
      editNickName(data).then(async res => {
        if (res.data.success) {
          await store.dispatch('user/getUserAll')
          Toast('修改成功')
          formData.nickName = ''
          shownik.value = false
        } else {
          Toast(res.data.message)
        }
      })
    }
    const show = ref(true)
    const showbtn = () => {
      console.log('000')
      formData.show = !formData.show
    }
    const cancell = () => {
      router.push('/me/cancell')
    }

    onMounted(async () => {
      await store.dispatch('user/getUserAll')
    })
    const resetToken = () => {
      store.dispatch('user/resetToken')
    }
    return {
      cancell,
      resetToken,
      user_info,
      showbtn,
      formData,
      show,
      showPopup,
      shownik,
      confirms,
      formatPhoneNumber
    }
  }
}
</script>
<style lang="less" scoped>
&:deep(.van-field__control) {
  color: #fff !important;
}

.pupShow {
  width: 667px;
  height: 437px;
  background: #222424;
  border-radius: 45px;

  h1 {
    margin: 0px;
    font-weight: normal;
    text-align: center;
    padding-bottom: 25px;
    font-size: 36px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  }

  .pu-txt {
    padding: 20px 0px;
    font-size: 30px;
    line-height: 50px;
  }

  .space-around {
    width: 80%;
    position: absolute;
    bottom: 10%;
    display: flex;
    justify-content: space-around;

    span {
      display: block;
      width: fit-content;
      border-radius: 40px;
      width: 25vw;
      text-align: center;
      padding: 15px 0px;
      font-size: 30px;
      font-weight: bold;
      letter-spacing: 2px;
    }

    span:nth-child(1) {
      background: #8c8c8c;
      color: white;
    }

    span:nth-child(2) {
      background: linear-gradient(to top, #3d94ff, #93c3ff);
      color: #000000;
    }
  }
}

&:deep(.van-dialog__header) {
  color: #fff;
  font-size: 36px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
}

&:deep(.van-dialog__confirm) {
  background: #f3f6f7 !important;
}

&:deep(.van-button--default) {
  background: #fff;
  color: #ffffff;
}

.set-warp {
  padding: 0px 30px;
  line-height: 60px;
  color: #fff;

  h2 {
    text-align: center;
    margin: 0;
    padding-bottom: 0.3rem;
    font-weight: 400;
    font-size: 0.4rem;

    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &:deep(.van-field) {
    width: 605px;
    background: #35393a;
    border-radius: 9px;
    margin-bottom: 40px;
  }
}

&:deep(.van-cell-group--inset) {
  background: #232524;
  margin: 0px;
}

&:deep(.van-dialog__footer) {
  background: #222424;
}

&:deep(.van-button--default) {
  background: #222424 !important;
  color: #fff;
}

&:deep(.van-popup) {
  // padding: 30px;
  // width: 70vw;
  // height: 76vh;
  background: #383838;
  top: 48%;
}

.setting-wrap {
  margin: 30px 0;
  padding: 0 30px 60px;

  .setting-box {
    margin-bottom: 30px;
    background: #232524;
    border-radius: 25px;

    .van-cell {
      padding: 36px 42px;
      display: flex;
      align-items: center;
      background: transparent;

      &:deep(.van-cell__title) {
        font-size: 30px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #ffffff;
        line-height: 48px;
      }

      &:deep(.custom-title) {
        font-size: 30px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #ffffff;
        line-height: 48px;

        &.idCard {
          position: relative;

          &:before {
            margin-right: 5px;
            display: inline-block;
            content: '';
            width: 18px;
            height: 18px;
            background: #ff3040;
            border-radius: 9px;
          }

          &.verified {
            &:before {
              background: rgba(35, 164, 0, 1);
            }
          }
        }
      }

      &:deep(.van-cell__right-icon) {
        font-size: 30px;
        font-weight: 500;
        color: #fff;
      }

      .avatar {
        float: right;
        width: 107px;
        height: 107px;
        border-radius: 54px;
        background-position: center;
        background-size: cover;
      }
    }
  }
}
</style>